<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <link rel="apple-touch-icon" sizes="76x76" href="/img/favicon.png">
    <link rel="icon" type="image/png" href="/img/favicon.png">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>
        AntRpc Console
    </title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no'
          name='viewport'/>
    <!--     Fonts and icons     -->
    <link href="/css/google-fonts.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/css/fontawesome-v5.7.1-all.css">
    <!-- CSS Files -->
    <link href="/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/css/now-ui-dashboard.min.css" rel="stylesheet"/>
    <link href="/css/my.css" rel="stylesheet"/>
    <!-- CSS Just for demo purpose, don't include it in your project -->

</head>
<body>
<div class="wrapper ">
    <div th:replace="~{common :: #common-sidebar}"></div>
    <div class="main-panel" id="main-panel">
        <nav id="common-nav" class="navbar navbar-expand-lg navbar-transparent  bg-primary  navbar-absolute">
            <div class="container-fluid my-padding-left-top-0">
                <div th:replace="~{common :: #commons-nav-btns}"></div>
                <div class="collapse navbar-collapse justify-content-end w-100" id="navigation">
                    <form style="width: 100%;" action="/">
                        <div class="input-group no-border">
                            <input type="text" name="name" class="form-control" placeholder="Search..."/>
                            <div class="input-group-append">
                                <div class="input-group-text">
                                    <i class="now-ui-icons ui-1_zoom-bold"></i>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </nav>
        <div class="panel-header panel-header-sm"></div>
        <div class="content">
            <div class="row">
                <div class="col-md-12">
                    <ol class="breadcrumb my-breadcrumb">
                        <li class="breadcrumb-item"><a href="/">服务列表</a></li>
                        <li class="breadcrumb-item active" th:text="${details.className}"></li>
                    </ol>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12">
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">服务基础信息</h5>
                        </div>
                        <div class="card-body">
                            <div class="content">
                                <div class="row mb-3">
                                    <div class="col-md-2 text-right">
                                        <span>接口名:</span>
                                    </div>
                                    <div class="col-md-10 text-left">
                                        <span th:text="${details.className}"></span>
                                    </div>
                                </div>
                                <div class="row mb-3">
                                    <div class="col-md-2 text-right">
                                        <div class="my-h-31px">负载均衡:</div>
                                    </div>
                                    <div class="col-md-10 text-left">
                                        <select class="w-100 form-control"
                                                th:attr="data-className=${details.className}"
                                                onchange="change_loadbalancer(this)">
                                            <option th:selected="${details.loadBalancerName.contains('RandomLoadBalancer')}"
                                                    value="io.github.wanggit.antrpc.client.zk.lb.RandomLoadBalancer">
                                                io.github.wanggit.antrpc.client.zk.lb.RandomLoadBalancer
                                            </option>
                                            <option th:selected="${details.loadBalancerName.contains('RoundLoadBalancer')}"
                                                    value="io.github.wanggit.antrpc.client.zk.lb.RoundLoadBalancer">
                                                io.github.wanggit.antrpc.client.zk.lb.RoundLoadBalancer
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">服务提供者详情列表</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead class="text-primary">
                                    <tr>
                                        <th>#</th>
                                        <th>应用</th>
                                        <th>权重</th>
                                        <th>注册时间</th>
                                        <th>注销时间</th>
                                        <th></th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="it, itStat: ${details.providers}">
                                        <td th:text="${itStat.index + 1}"></td>
                                        <td th:text="${it.appName}"></td>
                                        <td th:text="${it.weight}"></td>
                                        <td th:text="${it.regTime}"></td>
                                        <td th:text="${it.unregTime}"></td>
                                        <td>
                                            <button type="button" rel="tooltip" title="接口下线"
                                                    class="btn btn-info btn-icon btn-sm "
                                                    th:if="${it.unregTime == null}"
                                                    th:attr="data-className=${details.className}, data-host=${it.appName}"
                                                    onclick="interface_opr(this, 'N')">
                                                <i class="now-ui-icons media-1_button-pause"></i>
                                            </button>
                                            <button type="button" rel="tooltip" title="接口上线"
                                                    class="btn btn-info btn-icon btn-sm "
                                                    th:if="${it.unregTime != null}"
                                                    th:attr="data-className=${details.className}, data-host=${it.appName}"
                                                    onclick="interface_opr(this, 'Y')">
                                                <i class="now-ui-icons media-1_button-play"></i>
                                            </button>
                                            <button type="button" rel="tooltip" title="设置权重"
                                                    class="btn btn-info btn-icon btn-sm "
                                                    th:attr="data-className=${details.className}, data-host=${it.appName}"
                                                    onclick="interface_weights(this)">
                                                <i class="now-ui-icons business_chart-pie-36"></i>
                                            </button>
                                            <button type="button" rel="tooltip" title="方法调用情况统计"
                                                    class="btn btn-info btn-icon btn-sm "
                                                    th:attr="data-className=${details.className}, data-host=${it.appName}"
                                                    onclick="goto_method_stats(this)">
                                                <i class="now-ui-icons business_chart-bar-32"></i>
                                            </button>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">
                            <h5 class="card-title">服务提供者详情列表</h5>
                        </div>
                        <div class="card-body">
                            <div class="table-responsive">
                                <table class="table">
                                    <thead class="text-primary">
                                    <tr>
                                        <th>#</th>
                                        <th>应用</th>
                                        <th>订阅时间</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="it, itStat: ${details.consumers}">
                                        <td th:text="${itStat.index + 1}"></td>
                                        <td th:text="${it.appName}"></td>
                                        <td th:text="${it.regTime}"></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:insert="js"></div>
<script>
    $(document).ready(function () {
        $("#service_list_li").addClass("active");
    });

    /**
     * 修改负载均衡
     * @param select
     */
    function change_loadbalancer(select) {
        var className = $(select).attr("data-className");
        var newlb = $(select).val();
        $.ajax({
            url: "/interface/updateLoadBalancer",
            type: "POST",
            dataType: "JSON",
            data: {
                "clazz": className,
                "lb": newlb
            },
            success: function (response) {
                if (response.code === 2000) {
                    Swal.fire({
                        title: "AntRpc Console",
                        text: "负载均衡已修改为 " + newlb,
                        buttonsStyling: false,
                        confirmButtonClass: "btn btn-success",
                        type: "success"
                    });
                } else {
                    Swal.fire({
                        title: "AntRpc Console",
                        text: "修改失败",
                        buttonsStyling: false,
                        confirmButtonClass: "btn btn-info"
                    });
                }
            }
        });
    }

    function interface_opr(btn, flag) {
        var className = $(btn).attr("data-className");
        var host = $(btn).attr("data-host");
        $.ajax({
            url: "/interface/opr",
            type: "POST",
            dataType: "JSON",
            data: {
                "opr": flag,
                "clazz": className,
                "host": host
            },
            success: function (response) {
                if (response.code === 2000) {
                    Swal.fire({
                        title: "AntRpc Console",
                        text: (flag === "Y" ? "接口会在60秒内自动重新上线." : "接口下线成功."),
                        buttonsStyling: false,
                        confirmButtonClass: "btn btn-success",
                        type: "success"
                    }).then(function (value) {
                        window.location.reload();
                    });
                } else {
                    Swal.fire({
                        title: "AntRpc Console",
                        text: "接口上下线操作失败",
                        buttonsStyling: false,
                        confirmButtonClass: "btn btn-info"
                    }).then(function (value) {
                        window.location.reload();
                    });
                }
            }
        });
    }

    function interface_weights(btn) {
        var className = $(btn).attr("data-className");
        var host = $(btn).attr("data-host");
        window.location.href = "/interface_weights?className=" + className + "&host=" + host;
    }

    function goto_method_stats(btn) {
        var className = $(btn).attr("data-className");
        var host = $(btn).attr("data-host");
        window.location.href = "/method_stat?clazz=" + className + "&host=" + host;
    }

</script>
</body>
</html>